<?php require VIEWPATH . ADMIN_DIR . DIRECTORY_SEPARATOR . 'header.php' ?>
<style type="text/css">
	#dynamic-table img {
		cursor: pointer;
	}

	#cboxClose {
		text-indent: 0;
		font-size: 50px;
		font-weight: bold;
		margin-top: 10px;
		color: red;
	}
	td {
		word-break: break-all;
    	white-space: pre-wrap;
	}
</style>
<div class="page-header">
	<h1>
		外部链接管理
		<!-- 教师权限不可批量修改 -->
		<?php if($rmxUser['user_type'] != USER_TYPE_TEACHER): ?>
			<a href="<?= admin_url('brand/edit_custom_menu') ?>" class="brand-update btn btn-info a-custom">
				<i class="ace-icon fa fa-plus"></i> 添加外链
			</a>
		<?php endif ?>	
	</h1>
</div>
<div class="col-xs-12">
	<table id="dynamic-table" class="table table-striped table-bordered table-hover" style="margin-top:10px">
		<thead>
			<tr>
				<th>外链名称</th>
				<th>外链图标</th>
				<th width="38%">外链地址</th>
				<th>显示位置</th>
				<th>显示方式</th>
				<th>创建时间</th>
				<th>操作</th>

			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
</div>
<?php require VIEWPATH . ADMIN_DIR . DIRECTORY_SEPARATOR . 'footer.php' ?>
<script type="text/javascript">
	$(function() {
		// 表格
		var table = $('#dynamic-table').dt({
			"ajaxUrl": '<?= admin_url('brand/get_custom_menu_list') ?>',
			"columns": [
				{
					"data": "title"
				},
	            {"data": function(ret){
					if(ret.icon) {
						return '<div class="ace-thumbnails"><a href="' + ret.icon + '" data-rel="colorbox" class="cboxElement"><img src="' + ret.icon + '" width="64"/></a></div>';
					} else {
						return '';
					}
				}},
				{
					"data": "link"
				},
				{
					"data": "position"
				},
				{
					"data": "mode"
				},
				{
					"data": "createtime"
				},
				{
					"data": function(ret) {
						var action = '';
						// 教师权限不可批量修改
						<?php if($rmxUser['user_type'] != USER_TYPE_TEACHER): ?>
							action += '<a class="green" href="<?= admin_url('brand/edit_custom_menu?id=') ?>' + ret.id + '"><i class="fa fa-edit"></i> 修改</a>';
							action += '<a class="delete-menu red ml20" href="javascript:;" data-id="' + ret.id + '" data-title="' + ret.title + '"><i class="fa fa-times"></i> 删除</a>';
						<?php endif ?>
						return action;
					}
				},
			]
		});
		// 删除外链
		$("body").on("click", ".delete-menu", function(e){
			var id = $(this).data("id");
			var title = $(this).data("title");
			layer.confirm('确定删除：' + title + '？', function(){
				// 提交数据
				var postUrl = "<?= admin_url('brand/delete_custom_menu_action') ?>";
				var postData = {"id": id};
				ajax_post(postUrl, postData, function(res){
					table.draw();
				})
			});
		});
		// 图片轮播
		var colorbox_params = {
			rel: 'colorbox',
			reposition: true,
			scalePhotos: true,
			scrolling: false,
			previous: '<i class="ace-icon fa fa-arrow-left"></i>',
			next: '<i class="ace-icon fa fa-arrow-right"></i>',
			close: '&times;',
			current: '',
			maxWidth: '100%',
			maxHeight: '100%',
			onOpen: function() {
				$overflow = document.body.style.overflow;
				document.body.style.overflow = 'hidden';
			},
			onClosed: function() {
				document.body.style.overflow = $overflow;
			},
			onComplete: function() {
				$.colorbox.resize();
			}
		};
		setTimeout(() => {
			$('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
		}, 100);
		setTimeout(() => {
			$('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
		}, 1000);
		setTimeout(() => {
			$('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
		}, 2000);
		setTimeout(() => {
			$('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
		}, 3000);
		setTimeout(() => {
			$('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
		}, 5000);
	})
</script>